import React, { useEffect, useState } from 'react';
import { Row, Col } from 'antd';
import LazyLoad from 'react-lazyload';

const Content = ({ dataSource, isMobile, ...props }) => {
  const [headerImg, setHeaderImg] = useState('');
  const [title, setTitle] = useState('');
  const [subtitle, setSubtitle] = useState('');
  const {
    wrapper,
    img,
    title: initTitle,
    content,
    OverPack: overPackData,
    subtitle: initSubtitle,
  } = dataSource;

  useEffect(() => {
    setHeaderImg(img);
    setTitle(initTitle.children);
    setSubtitle(initSubtitle.children);
  },[])
  
  const handleMouseEnter = (item) => {
    setHeaderImg(item.headerImg);
    setSubtitle(item.headerText);
    setTitle(`${item.topText}   ${item.bottomText}`);
  }

  const handleMouseLeave = (item) => {
    setHeaderImg(img);
    setTitle(initTitle.children);
    setSubtitle(initSubtitle.children);
  }
  return (
    <LazyLoad>
      <div {...wrapper}>
        <div className='c-grid-layout'>
          <div className='content6-img'>
            <img src={headerImg}></img>
          </div>
          <div className='content6-title'><p>{title}</p></div>
          <div className='content6-subtitle'><p>{subtitle}</p></div>

          <div className='content6-list'>
            <Row>
              { content.children.map((i,key) => 
                <Col key={key} xs={6} md={6}>
                  <div className='item' key={key} onMouseEnter={() => {handleMouseEnter(i)}} onMouseLeave={() => {handleMouseLeave(i)}}>
                    <div className='content6-item-flex'>
                      <div className='img-box'><img src={i.icon}/></div>
                      <div className='text-box'>
                        <p className='text'>{i.topText}</p>
                        <p className='text'>{i.bottomText}</p>
                      </div>
                    </div>
                  </div>
                </Col>
              )}
            </Row>
          </div>
        </div>
        {/* <div
          id="Content4"
          key="Content4"
          style={{ height: "158px", backgroundColor: "#16181C" }}
        ></div> */}
      </div>
    </LazyLoad>
    
  );
}

export default Content;
